<template>
  <div>
    <!-- 导航栏 -->
    <div class="nav">
      <div class="w">
        <!-- 一级导航 -->
        <ul class="one">
          <!-- 菜单 -->
          <li class="item" id="menu">
            <a href="javascript:;" style="display: inline-block;">
              <i class="iconfont icon-caidan1"></i>
            </a>
          </li>

          <!-- logo -->
          <li class="item1">
            <a href="./index.html">
              <img src="@/assets/image/logo2.png" alt="" id="logo">
            </a>
          </li>

          <li class="item1">
            <a href="./index.html">
              <i class="iconfont icon-shouye"></i>首页
            </a>
          </li>

          <li class="item1">
            <a href="./category.html">
              <i class="iconfont icon-bijiben1"></i>开发记录
            </a>
          </li>

          <li class="item1">
            <a href="./index.html">
              <i class="iconfont icon-yuandaima"></i>大前端
            </a>

            <!-- 二级导航 -->
            <ul class="two" style="display: none;">
              <li>
                <a href="javascript:;">HTML5</a>
              </li>

              <li>
                <a href="javascript:;">CSS3</a>
              </li>

              <li>
                <a href="javascript:;">JavaScript</a>
              </li>
            </ul>
          </li>

          <li class="item1">
            <a href="./index.html">
              <i class="iconfont icon-zuzhijiagou1"></i>框架
            </a>

            <!-- 二级导航 -->
            <ul class="two" style="display: none;">
              <li>
                <a href="javascript:;">Vue</a>
              </li>

              <li>
                <a href="javascript:;">React</a>
              </li>

              <li>
                <a href="javascript:;">Angular</a>
              </li>
            </ul>
          </li>

          <li class="item1">
            <a href="javascript:;">
              <i class="iconfont icon-zhuti1"></i>扩展
            </a>

            <ul class="two" style="display: none;">
              <li>
                <a href="./links.html"><i class="iconfont icon-quanzi1"></i>人脉圈</a>
              </li>

              <li>
                <a href="./circle.html"><i class="iconfont icon-pengyouquan1"></i>朋友圈</a>
              </li>

              <li>
                <a href="./bigData.html"><i class="iconfont icon-dashuju2"></i>大数据</a>
              </li>

              <li>
                <a href="./me.html"><i class="iconfont icon-wowowo"></i>关于我</a>
              </li>
            </ul>
          </li>

          <!-- 功能栏 -->
          <li class="function">
            <ol>
              <!-- 白天昼夜切换 -->
              <li id="HighlightToggle">
                <img src="@/assets/image/taiyang.png" alt="">
              </li>

              <li>
                <a href="javascript:;">
                  <i class="iconfont icon-sousuo1"></i>
                </a>
              </li>
            </ol>
          </li>
        </ul>
      </div>
    </div>
    <!-- 遮罩层 -->
    <div class="mask"></div>

    <!-- 轮播图 -->
    <div class="banner">
      <div class="swiper mySwiper">
        <div class="swiper-wrapper">
          <div class="swiper-slide">
            <div class="text">
              <h3>不断改善，成为最佳!</h3>
              <p>Constantly improve and become the best!</p>
            </div>

            <img src="@/assets/image/t01d6f5fd3610da0a08.jpg" alt="">
          </div>

          <div class="swiper-slide">
            <div class="text">
              <h3>唯有坚持才能看见曙光!</h3>
              <p>Only persistence can see the dawn!</p>
            </div>

            <img src="@/assets/image/t012cde4a5058c156b7.jpg" alt="">
          </div>

          <div class="swiper-slide">
            <div class="text">
              <h3>永远年轻，永远热泪盈眶!</h3>
              <p>Forever young, forever tearful!</p>
            </div>

            <img src="@/assets/image/t01aaa82ef6d0f1ec87.jpg" alt="">
          </div>
        </div>
        <div class="swiper-pagination"></div>
      </div>

      <!-- 波纹 -->
      <div class="ripple">
        <svg class="waves" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
             viewBox="0 24 150 28" preserveAspectRatio="none" shape-rendering="auto">
          <defs>
            <path id="gentle-wave"
                  d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"/>
          </defs>
          <g class="parallax">
            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"/>
            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"/>
            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"/>
            <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"/>
          </g>
        </svg>
      </div>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped lang="css">
@import "@/assets/lib/font/iconfont.css";
@import "@/assets/index.css";
@import "@/assets/init.css";
@import "@/assets/public.css";
@import "@/assets/Responsive.css";
@import "@/assets/assembly.css";
@import "@/assets/lib/swiper/swiper-bundle.min.css";

</style>
